 <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布任务</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="./css/definite.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
</head>
<body>
    <div id="app" v-cloak :style="{'margin-bottom':'calc(' + api.safeArea.bottom + 'px + 1rem)'}">
        <div class="selectTemplate"
            v-if="hasTemplate"
            @click="navUseTemplate"
        >
            当前有可使用的模板，点击选择模板
        </div>
        <div class="headTaskType disbox">
            <h3 class="disflex ell">
                类型：{{tpType.title}} - {{tpType.name}}
            </h3>
        </div>
        <template
            v-if="mode !== 'simple'"
        >
            <div class="addStep">
                <h3 class="stepTitle">
                    任务步骤
                    <font color="#F30"> *</font>
                    <span>给接单人看的步骤</span>
                </h3>
                <div class="stepBlock clearfix"
                    v-for="(stepItem,stepIndex) of taskSteps"
                    :key="stepIndex + 'step'"
                >
                    <i>
                        {{
                            stepIndex + 1
                        }}
                    </i>
                    <div class="info">
                        <div class="stepBlockTitle">
                            第{{ Nzh.encodeS(stepIndex + 1)}}步
                            <img  @click="selectTaskStepContent(stepIndex)" 
                                src="../../../image/push/moreCenter.png" 
                                v-if="isShowAddHandle"
                            />
                        </div>
                        <template  v-if="stepItem.length < 1">
                            <div class="noSelect"
                            >
                                请点击右边小圆点选择步骤内容
                            </div>
                        </template>
                        <template
                            v-for="(ctItem,ctIndex) of stepItem"
                            :key="ctIndex + 'content'"
                        >
                            <!--文本框-->
                            <template
                                v-if="ctItem.type=='Description'" 
                            >
                                <div class="stepTextarea"
                                    @click="parFiexdHint(!ctItem.canInput)"
                                >
                                    <i class="closeStep"
                                        v-if="isShowAddHandle"
                                        @click="deleteStepContent(stepIndex,ctIndex)"
                                    >
                                    </i>
                                    <textarea
                                        v-model="ctItem.value"
                                        :class="{'hintInput':  mode === 'system' && ctItem.canInput}"
                                        :readonly=" mode === 'system' && !ctItem.canInput"
                                    ></textarea>
                                </div>
                            </template>
                            <!--收集用户信息-->
                            <template
                                v-if="ctItem.type=='CollectTextInfo'" 
                            >
                                <div class="collectText"
                                    @click="parFiexdHint(!ctItem.canInput)"
                                >
                                    <h3>收集用户的：</h3>
                                    <div class="inputs">
                                        <i
                                            class="closeStep"
                                            v-if="isShowAddHandle"
                                            @click="deleteStepContent(stepIndex,ctIndex)"
                                        ></i>
                                        <input type="text"
                                            placeholder="请输入收集用户的资料,例如:qq号码"
                                            :class="{'hintInput': mode === 'system' && ctItem.canInput}"
                                            :readonly="mode === 'system' && !ctItem.canInput"
                                            v-model="ctItem.placeholder"
                                        />
                                    </div>
                                </div>
                            </template>
                            <!--添加可操作-->
                            <template
                                v-if="ctItem.type=='Operable'" 
                            >
                                <div class="linkBlock" 
                                    @click="parFiexdHint(!ctItem.canInput)"
                                >
                                    <i class="closeStep"
                                        v-if="isShowAddHandle"
                                        @click="deleteStepContent(stepIndex,ctIndex)"
                                    >
                                    </i>
                                    <div class="textBlock disbox">
                                        <div class="select ell">
                                            <div class="title"
                                                @click="majorParSelect(stepIndex,ctIndex)"
                                            >
                                                <div>
                                                    {{ctItem.target.type}}
                                                </div>
                                                <img
                                                    class="_selectIco"
                                                    src="../../../image/push/Triangle.png"
                                                />
                                            </div>
                                        </div>
                                        <div class="inputs disflex">
                                            <input type="text"
                                                :placeholder="'请输入'+ctItem.target.type" 
                                                :class="{'hintInput': mode === 'system' && ctItem.canInput}"
                                                :readonly="mode === 'system' && !ctItem.canInput"
                                                v-model="ctItem.target.value" 
                                            />
                                            <!-- <img src="../../../../../../static/img/whatCire.png" /> -->
                                        </div>
                                    </div>
                                    <div class="needBtnWrap" v-if="ctItem.target && ctItem.target.content.length>0">
                                        <div class="needBtn clearfix">
                                            <h3>操作内容</h3>
                                            <div class="btn"
                                                v-for="(btnItem,btnIndex) of ctItem.target.content"
                                                :key="btnIndex + 'btn'"
                                            >
                                                {{
                                                    btnItem
                                                }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <!--图片事例-->
                            <template
                                v-if="Array.isArray(ctItem)" 
                            >
                                <div class="imgVideoList clearfix"
                                >
                                    <template
                                        v-for="(fileItem,fileIndex) of ctItem"
                                        :key="fileItem.fileIndex + 'file'"
                                    >
                                        <!-- <div class="item up"
                                        >
                                            <img src="http://img1.imgtn.bdimg.com/it/u=347508467,3785403878&fm=26&gp=0.jpg"/>
                                            <div class="btn">
                                                <div class="_oneBtn">
                                                    放大
                                                </div>
                                            </div>
                                        </div> -->
                                        <template
                                            v-if="fileItem.type=='Gallery'"
                                        >
                                            <div class="item up"
                                            >
                                                <img :src="selectShowImg(fileItem.uri)"
                                                    class="comImgWh"
                                                />
                                                <div class="comImgWh btn"
                                                >
                                                    <template v-if="isShowAddHandle">
                                                        <a
                                                            @click="handleFileNext(fileItem.uri)"
                                                        >
                                                                {{
                                                                    getLinkType(fileItem.uri) === 'img' ? '放大'
                                                                    : '播放视频'
                                                                }}
                                                        </a>
                                                        <a
                                                            @click="deleteStepFile(stepIndex,ctIndex,fileIndex)"
                                                        >
                                                                删除
                                                        </a>
                                                    </template>
                                                    <template  v-if="!isShowAddHandle">
                                                        <div class="_oneBtn"
                                                            @click="handleFileNext(fileItem.uri)"
                                                        >
                                                                {{
                                                                    getLinkType(fileItem.uri) === 'img' ? '放大'
                                                                    : '播放视频'
                                                                }}
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                        <template
                                            v-if="fileItem.type=='CollectGallery'"
                                        >
                                            <div class="item collectImg comImgWh"
                                            >
                                                <span>收集<br/>用户的截图</span>
                                                <font color="#3DA1FF" 
                                                    v-if="isShowAddHandle"
                                                    @click="deleteStepFile(stepIndex,ctIndex,fileIndex)"
                                                >
                                                    删除
                                                </font>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
                <div class="clearfix">
					<button
					    class="addButton"
					    @click="addTaskStep"
					    v-if="isShowAddHandle"
					>
					    添加步骤
					</button>
				</div>
            </div>
        </template>
        <template
            v-if="mode === 'simple'"
        >
            <div class="m-box">
                <div class="m-spec" style='padding-top:0.1rem;'>
                    <h3 class="stepTitle simpleTitle">
                        任务描述
                        <font color="#F30"> *</font>
                    </h3>
                    <div class="comWrap u-input">
                        <textarea class="_input"
                            placeholder="请输入任务描述"
                            v-model="simpleObj.taskSpec"
                            style="font-size: .3rem;"
                        ></textarea>
                    </div>
                </div>
                <div class="m-sample" style='margin-top:0.2rem;'>
                    <h3 class="stepTitle simpleTitle">
                        流程示例图
                    </h3>
                    <div class="comImg">
                        <div class="_wrap"
                            v-for="(flowItem,flowIndex) of simpleObj.simpleFlowImgs"
                            :key="flowItem.id + flowIndex"
                        >
                            <template>
                                <img
                                    class="comImgWh _img"
                                    :src="selectShowImg(flowItem.uri)"
                                    alt=""
                                />
                                <div class="u-btn">
                                    <div
                                        class="_btn"
                                        @click="handleFileNext(flowItem.uri)"
                                    >
                                        {{
                                            getLinkType(flowItem.uri) === 'img' ? '放大':
                                            '播放视频'
                                        }}
                                    </div>
                                    <div
                                        class="_btn"
                                        @click="deleteSimpleFlowsImg(flowIndex)"
                                    >
                                        删除
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="_wrap"
                            @click="simpleUploadFlowsImg"
                        >
                            <img
                                class="comImgWh _img"
                                src="../../../image/push/addImg2.png"
                            />
                        </div>
                    </div>
                </div>
                <div class="m-par">
                    <h3 class="stepTitle simpleTitle">
                        任务参数
                    </h3>
                    <div class="flex">
                        <div class="comWrap u-title "
                            @click="simpleParSelect"
                        >
                            <div class="u-t-title ell">
                                {{simpleObj.target.type}}
                            </div>
                            <img src="../../../image/push/Triangle.png"
                                class="_img"
                            />
                        </div>
                        <div class="flex1 comWrap u-input">
                            <input type="text"
                                style="font-size: .3rem;"
                                :placeholder="'请输入' + simpleObj.target.type"
                                v-model="simpleObj.target.value"
                            />
                        </div>
                    </div>
                </div>
                <div class="m-collect" style='margin-top:0.25rem;'>
                    <h3 class="stepTitle simpleTitle">
                        验证用户信息
                    </h3>
                    <div class="comWrap">
                        <textarea class="u-input" 
                            style="font-size: .3rem;"
                            placeholder="请输入收集资料,多个请换行,例如:qq号码"
                            v-model="simpleObj.simpleCotTexs"
                        ></textarea>
                    </div>
                </div>
                <div class="m-upImg">
                    <div class="comImg"
                        v-for="(checkItem,checkIndex) of simpleObj.simpleCheckImgs"
                        :key="checkItem + checkIndex"
                    >
                        <div class="_wrap">
                            <template
                            >
                                <img
                                    class="comImgWh _img"
                                    :src="selectShowImg(checkItem.uri)"
                                    alt=""
                                />
                                <div class="u-btn">
                                    <div
                                        class="_btn"
                                        @click="handleFileNext(checkItem.uri)"
                                    >
                                        {{
                                            getLinkType(checkItem.uri) === 'img' ? '放大':
                                            '播放视频'
                                        }}
                                    </div>
                                    <div
                                        class="_btn"
                                        @click="deleteSimpleCheckImg(checkIndex)"
                                    >
                                        删除
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="_wrap collectImg"
                        >
                            <span>收集<br/>用户的截图</span>
                        </div>
                    </div>
                    <div class="flexEnd">
                        <div class="addBtn"
                            @click="simpleUploadCheckImg"
                        >
                            + 添加验收视图
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template>
            <section class="high_set">
                <div class="high_title"
                    @click="handleShowHighSet"
                >
                    高级设置
                    <img src="../../../image/push/left.png"
                        :class="{'bottom': isShowHighSet}"
                    />
                </div>
                <div class="inputContent"
                    v-if="isShowHighSet"
                >
                    <div class="blocks"
                        @click="parFiexdHint(highSet.releaseAllowEdit != 1)"
                    >
                        <h3>限时自动释放（分钟）</h3>
                        <input type="text" placeholder="超过未提交的用户会释放任务名额,默认:10"
                            :readonly="highSet.releaseAllowEdit != 1"
                            v-model="highSet.autoReleaseTime"
                        />
                    </div>
                    <div class="blocks"
                        @click="parFiexdHint(highSet.passAllowEdit != 1)"
                    >
                        <h3>限时自动通过（分钟）</h3>
                        <input type="text" placeholder="超过这个时间段未审核,将会自动通过,默认:1440"
                                v-model="highSet.autoPassTime"
                                :readonly="highSet.passAllowEdit != 1"
                        />
                    </div>
                    <div class="blocks"
                        @click="parFiexdHint(highSet.closeAllowEdit != 1)"
                    >
                        <h3>截止关闭任务时间</h3>
                        <input type="text"
                            placeholder="到时间后自动清算,未做完的任务将退钱"
                            :readonly="highSet.closeAllowEdit != 1"
                            v-model="highSet.autoCloseTime"
                            style="width:calc(100% - 1rem);"
                        />
                        <div class="right"
                            style="color: #333"
                            @click="selectCloseTime"
                            v-if="highSet.closeAllowEdit == 1"
                        >
                            {{
                                highSet.closeTimeType === 'hour' ? '小时' : '天'
                            }}
                            <img src="../../../image/push/Triangle.png" />
                        </div>
                    </div>
                    <div class="blocks">
                        <h3>接任务的设备条件</h3>
                        <ul class="system clearfix" >
                            <li  v-for="(devTtem,deIndex) in device"
                                :key="devTtem.title"
                                @click="selectdDevice(deIndex)" 
                                :class="{'hover': devTtem.isSelect}"
                            >
                                <img :src="devTtem.img" />
                                {{devTtem.title}}
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </template>
        <template
        >
            <div class="otherBtn">
                <div
                    style="color:rgb(177, 177, 177);"
                    class="_wrap"
                    @click="navPreview"
                >
                    预览一下
                </div>
                <div
                    style="color:rgb(137, 201, 151);"
                    class="_wrap"
                    v-if="curTemplateLink"
                    @click="updateTaskTemplate"
                >
                    更新模版
                </div>
                <div
                    style="color:rgb(137, 201, 151);"
                    class="_wrap"
                    v-if="mode !== 'system'"
                    @click="saveTaskTemplate"
                >
                    保存为模板
                </div>
            </div>
        </template>
        <template>
			<div id="footer" :style="{'padding-bottom':api.safeArea.bottom + 'px'}">
				<div class="buttonFooter disbox fixed-btn">
					<div class="left ell disflex">预计花费
						<font>{{totalSpendPrice}}</font>元
					</div>
					<div class="right"
						@click="publishWill"
					>支付并发布</div>
				</div>
			</div>
        </template>
        <template v-if="isPageLoading">
            <div class="loadFull whiteBg pageload">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script src="./js/definite.js"></script>
</body>
</html>
